import React, { Component, PropTypes } from 'react';
import Relay from 'react-relay';
import { Modal, Button } from 'antd';
import Page from '../Page/PageComponent';
import styles from './Company.scss';
import Table from '../Table/Table';
import APForm from '../Form/Form';
import AddContractMutation from '../../relay/account/AddContractMutation';

class CompanyDetailComponent extends Component {
  constructor(props, context) {
    super(props);
    this.context = context;
    this.state = {
      showAddForm: false,
    };
    this.props.relay.setVariables({ companyId: this.props.params.companyId })
  }

  render() {
    const { viewer } = this.props;
    if (!viewer || !viewer.company){
      return null
    }
    const keys = [
      {name:"name", display:"编号"},
      {name:"config", display:"配置信息"},
      {name:"status", display:"状态"},
    ];
    return (
      <div>
        <Page heading='公司详情'>
          <Table
            keys={keys}
            data={viewer.company.contracts.edges}
            styles={styles}
          />


          <Button type="primary"
                  onClick={() => {
                    console.log('sss')
                    this.setState({showAddForm: true})
                  }}
          >增加合同</Button>
          <Modal
            title="新增公司"
            visible={this.state.showAddForm}
            footer={null}
          >
            <APForm
              viewer={viewer}
              fields={
                [{name: "name", placeholder: "合同名称"}]
              }
              mutation={AddContractMutation}
              mutationData={{payload: { company_id: viewer.company.id, }}}
              onSubmit={() => {this.setState({ showAddForm: false })}}
              onCancel={() => {this.setState({ showAddForm: false })}}
            />
          </Modal>

        </Page>

      </div>
    )
  }
};

export default Relay.createContainer(CompanyDetailComponent, {
  initialVariables: {
    companyId: undefined,
    defaultFirst: 1000,
  },
  fragments: {
    viewer: () => Relay.QL`
      fragment on User {
        company(id: $companyId){
          id
          name
          contracts(first: $defaultFirst){
            edges{
              node{
                id
                name
              }
            }
          }
        }
      }
    `
  }
});
